<template>
  <div>
    <van-cell-group border>
  <van-field v-model="yzm" label="验证码" placeholder="请输入验证码.." autofocus>
      <template #button>
    <van-button size="small" type="primary" :disabled="btnFlag" @click="sendMsg">{{txt}}</van-button>
  </template>
  </van-field>
  
</van-cell-group>

<div class="loginBtn">
<van-button type="danger" round block  :disabled="flag"  @click="next">下一步</van-button>

</div>
  </div>
</template>

<script>
import {doSendMsg ,doCheckCode } from "../../api/user";
import Vue from 'vue';
import {  CellGroup,Button,Toast} from 'vant';

Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Toast);
export default {
data () {
    return {
        yzm:"",
        txt:"发送验证码",
        time:60,
        btnFlag:false
    }
},

methods:{
    sendMsg(){
        const timer=setInterval(()=>{
            this.time--;
            if(this.time==0){
                clearInterval(timer);
                this.btnFlag=false;
                this.txt="发送验证码";
                this.time=60

            }else{
                this.txt=this.time+'s后可以发送验证码';
                this.btnFlag=true

            }
        },1000)
           setTimeout(()=>{
         doSendMsg({tel:localStorage.getItem("tel")}).then(res=>{
            this.yzm=res.data.data
         })
    },1500);
 
    
    },
    next(){
        doCheckCode({tel:localStorage.getItem("tel"),telcode:this.yzm}).then(res=>{
            switch (res.data.code) {
                case "10007":
                    Toast("验证码有误，请重新输入")
                    break;
                case "200":
                    this.$router.push('/register/three')
                    break;
            
                default:
                    break;
            }
        })
    }
    
  
 
   
},
computed: {
    flag(){
        //满足输入的内容的正则规则
        if(/^\d{5}$/.test(this.yzm)){
            return false;
        }else{
            return true
        }
    }
},
}
</script>

<style scoped>
.loginBtn{
    width: 80%;
    margin: 20px auto;
}
</style>